<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${charName}"></title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1 th:text="${charName}"></h1>
<canvas id="myLineChart" width="400" height="200"></canvas>
<script>
    const temperatures = [[${temperatures}]];
    const labels = [[${labels}]];
    const labelName = '[[${labelName}]]';
    const ctx = document.getElementById('myLineChart').getContext('2d');
    const myLineChart = new Chart(ctx, {
        type: 'line', // 选择图表类型为折线图
        data: {
            labels: labels, // X 轴标签
            datasets: [{
                label: labelName,
                data: temperatures,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderWidth: 2,
                // fill: true
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
</body>
</html>
